<template>
  <div :class="$style.previewImageVideo">
    <Button type="text" @click="visible=true">查看</Button>
    <el-dialog :visible.sync="visible" v-bind="$attrs" :title="title" :close-on-click-modal="false" append-to-body>
      <div :class="$style.content">
        <el-table :data="list" border>
          <el-table-column prop="annexeName" label="文件名"></el-table-column>
          <el-table-column label="操作" width="100" align="center" :show-overflow-tooltip="false">
            <template v-slot="{row}">
              <Button type="text" @click="clickHandle(row)">预览</Button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- <el-image v-if="showImage" :preview-src-list="previewSrc">
      <div slot="error" :class="$style.videoError">
        <p>图片 {{ annexeName }} 加载失败</p>
      </div>
    </el-image> -->
    <ImageViewer v-if="showImage" :url-list="urlSrcList" :on-close="imageViewerClose" :z-index="9999">
    </ImageViewer>
    <Making v-else v-model="showMaking" :click-making-close="false" @close="makingCloseHandle">
      <div style="display:relative;max-width:80vw;max-height:80vh">
        <!-- <video v-if="!videoError" style="max-width:80vw;max-height:80vh" :src="src" controls @error="videoErrorHandle"></video> -->
        <!-- <div v-else :class="$style.videoError" style="max-width:80vw;max-height:80vh">
          <p>视频 {{ annexeName }} 加载失败</p>
        </div> -->
        <div :id="id"></div>
      </div>
    </Making>
  </div>
</template>
<script>
import Making from '@/components/Making'
import ImageViewer from 'element-ui/packages/image/src/image-viewer'
import XGPlayer from 'xgplayer'
export default {
  name: 'PreviewImageVideo',
  components: {
    Making,
    ImageViewer
  },
  props: {
    annexes: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '附件'
    },
    prefix: {
      type: String,
      default: '/img/'
    }
  },
  data() {
    return {
      visible: false,
      showMaking: false,
      showImage: false,
      annexeType: '',
      annexeName: '',
      urlSrcList: [],
      src: '',
      videoError: false,
      // xgplayer
      palyerInstance: null,
      id: ''
    }
  },
  computed: {
    list() {
      return this.annexes.map(e => {
        if (e.status === 'ready') {
          e.src = window.URL.createObjectURL(e.raw)
        } else {
          e.src = `${/^marketing/.test(e.annexePath) ? process.env.VUE_APP_FILE_PREFIX : this.prefix}${e.annexePath}`
        }
        return e
      })
    }
  },
  created() {
    this.id = Math.floor(Math.random() * 0xffffff).toString(16)
  },
  methods: {
    clickHandle(l) {
      this.annexeType = l.annexeType
      this.annexeName = l.annexeName
      const isImage = !this.isVideo(l.annexeType)
      if (isImage) {
        this.urlSrcList = [l.src]
        this.showImage = true
      } else {
        this.src = l.src
        this.showMaking = true
        this.$nextTick(() => {
          this.player()
        })
      }
    },
    // 媒体类型检查
    isVideo(annexeType) {
      return /^(mp4)|(webm)|(ogg)$/.test(annexeType.toLowerCase())
    },
    // 视频加载错误
    videoErrorHandle(e) {
      this.videoError = true
    },
    makingCloseHandle() {
      this.src = ''
      this.annexeType = ''
      this.annexeName = ''
      this.urlSrcList = []
    },
    imageViewerClose() {
      this.showImage = false
      this.makingCloseHandle()
    },
    player() {
      this.palyerInstance = new XGPlayer({
        id: this.id,
        url: this.src,
        download: true,
        pip: true,
        screenShot: true,
        videoInit: true
      })
    }
  }
}
</script>
<style lang='scss' module>
.previewImageVideo{
  display: inline-block;
  text-align: left;
}
.content{
}
.imageError{
  &>i{
    color: #fff;
    fill: #fff;
    font-size: 140px;
  }
}
.videoError{
  color: #fff;
  font-size: 18px;
  &>p{
    margin: 0;
    padding: 0;
  }
}
</style>
